{%  extends 'layout/basic.html' %}
{% load static %}
{% block title %} 用户短信登录 {% endblock %}

{% block css %}
    <link rel="stylesheet" href="{% static 'css/account.css' %}">
    <style>

    </style>
{% endblock %}

{% block content %}
    <div class="account">
        <div class="title" >用户短信登录</div>
        <form id="smsForm" method="POST" novalidate>
            {% csrf_token %}
            {% for field in form %}
                {% if field.name == 'code' %}
                    <div class="form-group">
                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                        <div class="row">
                            <div class="col-xs-7">
                                {{ field }}
                                <span class="error-msg"></span>
                            </div>
                            <div class="col-xs-5">
                                <input id="btnSms" type="button" class="btn btn-default" value="点击获取验证码">
                            </div>
                        </div>
                    </div>
                {% else %}
                    <div class="form-group">
                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                        {{ field }}
                        <span class="error-msg">{{ field.errors.0 }}</span>
                    </div>
                {% endif %}
            {% endfor %}
            <div>
                <div style="float: right">
                    <a href="{% url 'login' %}">密码登录？</a>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-3">
                    <input id="btnSUbmit" type="button" class="btn btn-primary" value="登  录" style="background: #8c8c8c"/>
                </div>
            </div>
        </form>
    </div>
{% endblock %}

{% block js %}
<script>
//页面加载完成自动执行的函数
$(function() {
    {#alert('系统未接入短信平台，将无法通过手机号获取验证码！\n请使用密码进行登录！');#}
    bindClickBtnSms();
    bindClickBtnSubmit();
});

// 登录事件
function bindClickBtnSubmit() {
    $('#btnSUbmit').click(function () {
        //清空上次输入报错
        $('.error-msg').empty();
        //收集表单数据
        //发送ajax请求，把表单发送过去
        $.ajax({
            url: "{% url 'login_sms' %}",
            type: "POST",
            data: $('#smsForm').serialize(),//获取所有字段数据 + csrf token
            dataType: "JSON",
            success:function (res) {
                console.log(res);
                if (res.status){
                    location.href = res.data;
                }else {
                    //如果出现错误，则在错误的表格底下显示错误信息
                    $.each(res.error,function (key,value) {
                        $("#id_"+key).next().text(value[0])
                    })
                }
            }
        })
    })
}

//点击获取验证码绑定事件
function bindClickBtnSms() {
    $('#btnSms').click(function () {
        $('.error-msg').empty()
        //获取用户输入的手机号
       var mobilePhone = $('#id_mobile_phone').val();
       //发送ajax请求，把手机号发送过去
        $.ajax({
            url:"{% url 'send_sms' %}",//等价于/send/sms/
            type:"GET",
            dataType:"JSON",//将服务端返回的数据反序列化为字典
            //随请求发送的数据，注意：key值mobile_phone需与forms表单字段一致，，，/send/sms?mobile_phone=18812341234&tpl=register
            data:{mobile_phone:mobilePhone,tpl:"login"},
            success:function (res) {
                //ajax请求成功后自动执行的函数：res为后端返回的值
                console.log(res);
                if(res.status){
                    console.log('发送成功，开始60s倒计时');
                    {#console.log(res.code);#}
                    senSmsRemind();
                } else {
                    //如果出现错误，则在错误的表格底下显示错误信息
                    {#console.log(res);//{status:False,error:{mobile_phone:[’错误信息‘,]}}#}
                    $.each(res.error,function (key,value) {
                        $("#id_"+key).next().text(value[0])
                    })
                }
            }
        })

    })
}
//验证码60s倒计时
function senSmsRemind() {
    var $smsBtn = $('#btnSms');
    $smsBtn.prop('disabled',true);//禁用按钮
    var time = 60;
    var remind = setInterval(function () {
        $smsBtn.val(time + '秒重新发送');
        time = time - 1;
        if (time < 1 ) {
            clearInterval(remind);
            $smsBtn.val('点击获取验证码').prop('disabled',false);
        }
    },1000)
}

</script>

{% endblock %}




